<div id="DemandDetail" data-title="项目详情">
    <style>@@include('modules/DemandDetail/main.css.min')</style>
    <div class="DemandInfo_vue">
        <div class="details">
            <!--***项目详细信息-->
            <div class="container">
                <!--N次发布标签 v-if="current_demand.published_count > 1"-->
                <div class="n-published second-pub" v-if="current_demand.published_count == 2"></div>
                <div class="n-published third-pub" v-if="current_demand.published_count == 3"></div>
                <div class="n-published fourth-pub" v-if="current_demand.published_count == 4"></div>
                <div class="n-published" v-else-if="current_demand.published_count > 4"><span class="n-rate">{{current_demand.published_count}}次发布</span></div>

                <div class="goIndex" evt="goIndex">
                    <span class="icon-return"></span><span class="province-name">项目大厅</span>
                </div>
                <h1 v-if="current_demand.supplier_partic_status == 120 || current_demand.supplier_partic_status==110 ">请尽快联系</h1>
                <h1 v-else-if="current_demand.status==200">项目结束</h1>
                <h1 v-else-if="current_demand.status==100 && current_demand.cate != 4">抢单结束</h1>
                <h1 v-else-if="current_demand.status==100 && current_demand.cate == 4">竞标结束</h1>
                <h1 v-else-if="current_demand.status==10 && current_demand.isEnd == true">竞标结束</h1>
                <h1 v-else-if="current_demand.status==10 && current_demand.tag=='110'">请尽快联系</h1>
                <h1 v-else-if="(current_demand.status==15 || current_demand.status==20 || current_demand.status==30) && current_demand.supplier_partic_status =='10'">正在排队</h1>
                <h1 v-else-if="current_demand.status==15 && current_demand.supplier_partic_status =='0'">竞价结束</h1>
                <h1 v-else>等待报价</h1>
                <div class="demand-info">
                    <!--戳-->
                    <span v-if="current_demand.status == 200" class="icon-complete-pc demand-status"></span>
                    <span v-else-if="current_demand.my_follow_type == 1" class="icon-dujiasuoding demand-status"></span>
                    <span v-else-if="current_demand.has_demand_locked" class="icon-qitarensuoding demand-status"></span>
                    <span v-else-if="current_demand.status == 100" class="icon-qiangdanjieshu demand-status"></span>
                    <div class="demand-info-budget">
                        <span class="demand-info-title">预算<span v-if="current_demand.for_gold"> .</span></span>
                        <span class="format-budget color-black" v-if="current_demand.cate == '4'"><b>竞价</b></span>
                        <span class="format-budget color-black" v-else-if="current_demand.budgetFormat.budget">{{current_demand.budgetFormat.budget}}{{current_demand.budgetFormat.unit}}</span>
                        <span class="format-budget color-black" v-else>议价</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">位置</span>
                        <span v-if="current_demand.cate == 4" class="color-gray">{{current_demand.city}}</span>
                        <span v-else class="color-gray">{{current_demand.city}}{{current_demand.address}}</span>
                    </div>

                    <div class="demand-info-address" v-if="current_demand.cate=='2'">
                        <span class="demand-info-title">故障</span>
                        <span class="demand-cate demand-repair">维修</span>
                        <span class="color-gray detail-info">{{current_demand.malf_name}}</span>
                    </div>

                    <div class="demand-info-address" v-else>
                        <span class="demand-info-title">需求</span>
                        <span class="demand-cate" v-if="current_demand.cate == '1'">安装</span>
                        <span class="demand-cate demand-rental" v-else-if="current_demand.cate == '3'">租赁</span>
                        <span class="color-gray detail-info">{{current_demand.location_name}},{{current_demand.size}}㎡,{{current_demand.color_name}},{{current_demand.span}}</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">称呼</span>
                        <span class="color-gray" evt="onlineChat"><span class="icon-message"></span>{{current_demand.user.nick}}</span>
                    </div>

                    <div class="demand-info-address">
                        <span class="demand-info-title">手机</span>
                        <span class="color-gray" v-if="(current_demand.supplier_partic_status==110 || current_demand.supplier_partic_status==200) && current_demand.tag==0 && current_demand.my_follow_type != 3">{{current_demand.user.phone}}</span>
                        <span class="color-gray" v-else>抢单成功可见</span>
                    </div>
                    <!--录音-->
                    <div class="demand-info-audioPane" dom="audioPane" v-if="current_demand.audio != '' || current_demand.audio_sensitive ">
                        <span class="demand-info-title">客户录音</span>
                        <audio dom="audio" id="audioTag" preload="metadata" v-bind:src="current_demand.audio"></audio>

                        <div class="color-gray controls" evt="playPause">
                            <!--背景圆-->
                            <div class="circle">
                                <!--左半边圆-->
                                <div class="circle_left">
                                    <div class="clip_left">

                                    </div>
                                </div>
                                <!--右半边圆-->
                                <div class="circle_right">
                                    <div class="clip_right"></div>
                                </div>
                                <button class="a-play play-pause" dom="play">
                                    <span class="icon-play-one"></span>
                                </button>
                            </div>
                        </div>


                    </div>
                    <!--浏览人数-->
                    <div class="demand-info-scan">
                        <span class="scan-count">{{current_demand.scan_count}}人浏览过</span>
                        <span class="deadline pull-right" v-if="current_demand.tag == 0 && current_demand.my_follow_type == 0 && (current_demand.status == 10 || current_demand.supplier_partic_status == 110 || current_demand.supplier_partic_status == 120)">
                            <span class="icon-Tender text-primary"></span>
                            <span class="count-deadline"></span>
                        </span>
                    </div>

                </div>
            </div>
            <!--***24小时无理由退款解释-->
            <div class="point-back" evt="load@m/project/Refunds">
                <p class="back-title"><img class="hours24" src="/img/24hours.png" />支持24小时无理由退款</p>
                <p class="back-tip">付费获得本条商业信息，若信息无效或有误将全额退返</p>
                <span class="icon-Expansion"></span>
            </div>
            <!--***竞价成功的工程商反馈信息的面板 -->
            <div class="feedack-pane" v-if="current_demand.supplier_partic_status == 200 && current_demand.cate != 4 && current_demand.my_follow_type != 3">
                <!--<div class="gray-bar"></div>-->
                <div class="container">
                    <div class="col-xs-6">
                        <p class="text-left">{{finish_info.info}}</p>
                        <button class="status btn btn-primary" v-bind:class="{'gray-blue': current_demand.user_finish_img_info.state != '-1'}" v-bind:evt="finish_info.evt">{{finish_info.btn}}</button>
                    </div>
                    <div class="col-xs-6 text-right">
                        <p>{{feedback_info.info}}</p>
                        <button class="status feedback-btn btn btn-primary" v-bind:class="{'gray-blue': current_demand.feedback_info.feedback_status != '0' || current_demand.status == '200'}"
                                v-bind:evt="feedback_info.evt">{{feedback_info.btn}}</button>
                    </div>
                </div>
            </div>
            <!--***跟进记录-->
            <div class="bid-suppliers" v-if="current_demand.follow_records && current_demand.follow_records.length != 0">
                <div class="gray-bar"></div>
                <div class="container">
                    <h3>跟进记录</h3>
                    <div class="item" v-for="(supplier,index) in current_demand.follow_records" v-bind:class="{'succ-item': supplier.follow_type == 2}">
                        <div class="infos">
                            <h5>{{supplier.nickname}}<span class="mobile">{{supplier.mobile}}</span></h5>
                            <p v-if="supplier.follow_msg">
                                理由:{{supplier.follow_msg}}
                            </p>
                        </div>
                        <span class="offer pull-right offer-color" v-if="supplier.follow_type == 1">独家锁定</span>
                        <span class="offer pull-right offer-color" v-else-if="supplier.follow_type == 2">继续跟进</span>
                        <span class="offer pull-right" v-else-if="supplier.follow_type == 3">取消跟进</span>
                    </div>
                </div>
            </div>
            <!--***项目最新动态-->
            <!--项目结项后展示信息:1、项目完成：2、有完成者（工程商）的信息-->
            <div class="notes" v-if="current_demand.demand_finish_img_info.id && current_demand.status==200">
                <div class="gray-bar"></div>
                <div class="container">
                    <h3>信息更新</h3>
                    <div class="notes-info">
                        <!-- 状态图标 安装+10；维修+4；租赁+6-->
                        <img class="cate-color" src="/img/demand/v4.png" />
                        <!--<img class="cate-color" v-else-if="current_demand.cate=='2'" src="/img/demand/v4.png" />
                            <img class="cate-color" v-else-if="current_demand.cate=='3'" src="/img/demand/v6.png" />-->
                        <!--详细数据-->
                        <!--<img class="family-name" v-if="current_demand.demand_finish_img_info.avatar" v-bind:src="current_demand.demand_finish_img_info.avatar"-->
                        <!--/>-->
                        <!--<img class="family-name " v-else src="`{VIEWSURL}`/m/ChatRoomTpl/images/supplier.jpg" />-->
                        <div class="user-info ">
                            <span class="name ">客户 | {{current_demand.demand_finish_img_info.nickname}}</span>
                            <!--<span class="time ">{{updateTime(current_demand.demand_finish_img_info.upload_time)}}</span>-->
                        </div>
                        <div class="note ">项目已圆满完成，客户已验收！</div>
                        <div class="note ">
                            <div class="c-drawing" v-bind:class="{ 'hasImg' : current_demand.demand_finish_img_info.img !='' } ">
                                <div class="c-d-tu">
                                    <img v-bind:src="current_demand.demand_finish_img_info.img" class=" " evt="scanBig" dom="drawPic " />
                                </div>
                            </div>
                            <div class="c-d-site ">
                                <span class="icon-nail "></span>
                                <span>工程场地实拍图</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--项目结项后展示信息end-->
            <!--项目未结项显示信息:1、评论列表；2、备注和图片；3、维修项目显示颜色间距环境；如果以上三项都不存在，则不显示-->
            <div class="notes" v-else>
                <div class="gray-bar " v-bind:class="{'hide':!current_demand.source && current_demand.cmt_list.length==0 && !current_demand.note && !current_demand.image && current_demand.cate!='2'}"></div>
                <div class="container">
                    <h3 v-bind:class="{'hide':!current_demand.source && current_demand.cmt_list.length==0 && !current_demand.note && !current_demand.image && current_demand.cate!='2'}">
                        信息更新</h3>
                    <!--评论列表-->
                    <div class="notes-info " v-for="cmt_list of publish_remark_list ">

                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">【{{cmt_list.inedx}}次发布】{{cmt_list.val}}</div>
                    </div>
                    <!--项目固定显示信息-->
                    <!--所有的项目有备注则显示-->
                    <div class="notes-info " v-if="current_demand.note ">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">{{current_demand.note}}</div>
                    </div>
                    <!--所有的项目有图片则显示-->
                    <div class="notes-info " v-if="current_demand.image !='' ">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">客户 | {{current_demand.user.nick}}</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">
                            <div class="c-drawing " v-bind:class="{ 'hasImg' : current_demand.image !='' } ">
                                <p class="c-d-tip " v-if="current_demand.image=='' ">工程场地实拍图尚未上传</p>
                                <div class="c-d-tu " v-else>
                                    <img v-bind:src="current_demand.image " class=" " evt="scanBig" dom="drawPic " />
                                </div>
                            </div>
                            <div class="c-d-site ">
                                <span class="icon-nail "></span>
                                <span v-if="current_demand.cate!='2' ">工程场地实拍图</span>
                                <span v-else>屏幕故障实拍图</span>
                            </div>
                        </div>
                    </div>
                    <!--维修的项目需要将项目本身信息（间距，颜色等）显示出来，而安装只需要显示图片和备注-->
                    <div class="notes-info " v-if="current_demand.cate=='2'">
                        <!--<span class="family-name ">{{current_demand.user.nick.substr(0,1)}}</span>-->
                        <div class="user-info ">
                            <span class="name ">客户 | {{current_demand.user.nick}}</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note " v-if="current_demand.cate=='2' ">
                            {{current_demand.location_name}}，{{current_demand.color_name}}，间距{{current_demand.span}}
                            <span v-if="current_demand.size != 0.00">，面积{{current_demand.size}}㎡</span>
                        </div>
                    </div>
                    <!--客户来源-->
                    <div class="notes-info " v-if="current_demand.source && current_demand.cate !='4'">
                        <div class="user-info ">
                            <span class="name ">万屏汇小秘书</span>
                            <!--<span class="time ">{{updateTime(current_demand.published_at)}}</span>-->
                        </div>
                        <div class="note ">
                            <span>客户来源：{{current_demand.source}}</span><br>
                            <span v-if="sem(current_demand.sem)">搜索词：{{sem(current_demand.sem)}}</span>
                        </div>
                    </div>
                    <!--项目固定显示信息end-->
                </div>
            </div>
            <!--项目未结项显示信息end-->

            <!--项目最新动态end-->
            <!--***参与竞价的工程商列表-->
            <div class="partical-suppliers" v-if="current_demand.cate != 4 && current_demand.supplier_list.length != 0">
                <div class="gray-bar"></div>
                <div class="container">
                    <h3>参与竞拍者</h3>
                    <div class="item" v-for="(supplier,index) in sList" v-bind:class="{'succ-item': supplier.succ_item == true}">
                        <span class="index" v-bind:class="{'myself-index': supplier.id == user.user_id}">{{index + 1}}</span>
                        <div class="infos" v-if="current_demand.status == '10'">
                            <h5 v-if="supplier.id == user.user_id" class="myself">我</h5>
                            <h5 v-else>抢单人 {{supplier.partic_at.toString().substr(7)}}{{supplier.id.toString().substr(-1,1)}}</h5>
                            <p>
                                <span class="status no-margin" v-bind:class="{'text-danger':supplier.status == '130'}">{{supplier.info}}</span>
                            </p>
                        </div>
                        <div class="infos" v-else>
                            <h5 v-if="supplier.id == user.user_id">我</h5>
                            <h5 v-else>{{supplier.nick}}</h5>
                            <p>
                                {{supplier.mobile}}
                                <span class="status" v-bind:class="{'text-danger':supplier.status == '130'}">{{supplier.info}}</span>
                            </p>
                        </div>
                        <span class="offer pull-right" v-if="supplier.oldOrder">抢单成功</span>
                        <span class="offer pull-right" v-else-if="supplier.offer == '200'" v-bind:class="{yellow:supplier.succ_item == true}">爆灯</span>
                        <span class="offer pull-right" v-else>{{supplier.offer}}汇币</span>
                    </div>
                </div>
            </div>
            <div class="gray-bar "></div>
            <!--***折叠-->
            <div class="zhedie">
                <!--抢过单且项目结束-->
                <div class="panel-group" id="accordion" v-if="current_demand.status==200&&current_demand.supplier_partic_status==200">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    怎么获得更多项目推送？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇每天会收到数千个客户询盘。我们希望帮助优质的地方服务商极大程度地降低获客成本，以在竞争中胜出。
                            </div>
                        </div>
                    </div>
                </div>
                <!--没抢过单且项目结束-->
                <div class="panel-group" id="accordion" v-else-if="current_demand.status==200&&current_demand.supplier_partic_status!=200">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    项目怎么完成了？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                这个项目来自您当地的led屏幕需求，客户已经选择了心仪的工程商，下次早点来吧。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    比他人更快获得订单推送？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇订单以成就值从高到低依次推送订单消息，提高您的成就值可快速获得订单推送。
                                <br>每次项目推送将会消耗1条推送次数，请确保套餐中“新项目提醒”额度充足，以免错过最新的项目机会。
                            </div>
                        </div>
                    </div>
                </div>
                <!---->
                <div class="panel-group" id="accordion" v-else>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    这个项目是怎么来的？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇每天会收到数千个客户询盘。我们希望帮助优质的地方服务商极大程度地降低获客成本，以在竞争中胜出。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    如何收费？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse in">
                            <div class="panel-body">
                                在万屏汇您需要购买汇币(万屏汇虚拟货币)直接参与竞价抢单，或购买派单套餐以获取客户信息。您还可以购买新项目提醒以及时收到新订单通知，不错过任何机会。了解更多关于服务套餐的细节，欢迎移步
                                <a class="link" evt="load@m/user/ValueAddService" href="#">“我的账户”</a>了解详细。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                    比他人更快获得订单推送？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇订单以成就值从高到低依次推送订单消息，提高您的成就值可快速获得订单推送。
                                <br>每次项目推送将会消耗1条推送次数，请确保套餐中“新项目提醒”额度充足，以免错过最新的项目机会。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                    竞拍规则？<span class="icon-circle-down"></span>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse in">
                            <div class="panel-body">
                                万屏汇订单以竞拍方式获得客户联系方式，每个订单竞拍时间为5分钟，竞拍期间内出价最高者才可获得客户联系方式，抢单结束后将退回出局者的汇币。
                                <br>每个订单最多出200汇币，属于爆灯状态，多人爆灯，成就值最高者得。
                                <br>如竞拍成功者15分钟内未能联系客户，名额作废且扣除当次竞拍汇币的30%作为惩罚，并自动通知下一名竞拍者中标。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--***页面底部按钮及报价框-->
        <div class="demand-bottom">
            <!--抢单第一名 :如果有-->
            <div class="first-number" v-if="current_demand.status == '10' && current_demand.supplier_list.length != 0 && current_demand.my_follow_type == 0">
                <span class="name" v-if="current_demand.supplier_list[0].id == user.user_id">我&nbsp;&nbsp;&nbsp;</span>
                <span class="name" v-else>抢单人 {{current_demand.supplier_list[0].partic_at.toString().substr(7)}}{{current_demand.supplier_list[0].id.toString().substr(-1,1)}}&nbsp;&nbsp;&nbsp;{{current_demand.supplier_list[0].mobile}}&nbsp;&nbsp;&nbsp;</span>
                <span class="huibi">{{current_demand.supplier_list[0].offer}}汇币&nbsp;&nbsp;</span>
                <!--<span class="huibi" v-else>**汇币&nbsp;&nbsp;</span>-->
                <span class="text-primary">暂时领先</span>
            </div>
            <div class="first-number" v-else>竞拍期间内出价最高者可获得客户联系方式</div>
            <!--输入框-->
            <div class="auction-input hide" v-if="current_demand.status == '10' && current_demand.tag == 0 && !current_demand.has_max && current_demand.my_follow_type == 0">
                <div class="count" type="minus" v-on:click="changeOffer">-</div>
                <input class="offer-input" v-bind:class="{hoverYellow:(current_demand.status == '10' && current_demand.curr_offer == 200 && !current_demand.self_has_max)}"
                       type="number" v-on:input="inputFunc" v-model="current_demand.curr_offer" v-if="current_demand.status !='200' && current_demand.status !='100'"
                />
                <span class="label2">汇币</span>
                <div class="count" type="plus" v-on:click="changeOffer">+</div>
            </div>

            <!--爆灯按钮-->
            <div class="baodeng" v-if="current_demand.status == '10' && !current_demand.has_max && current_demand.curr_offer != 200 && current_demand.my_follow_type == 0"
                 evt='bomb'><span class="icon-baodeng"></span>爆灯</div>

            <!--项目进行中RO；排队中-->
            <div class="button-status" v-bind:class="{'first-bid':current_demand.status == '10' && !current_demand.has_max && current_demand.my_follow_type == 0}">
                <!--first-bid :一次竞价 && 没有人爆灯-->

                <a class="btn" v-bind:evt="btnStatus.evt" v-if="current_demand.status == '11'"><img src="/img/demand/loading.gif" style="width: .8rem;"/></a>

                <a class="btn disabled" v-else-if="current_demand.my_follow_type == 3 ">您已取消跟进</a>
                <a class="btn" evt="" v-else-if="current_demand.my_follow_type == 2 || current_demand.my_follow_type == 1 " v-bind:href="'tel:'+current_demand.user.phone"><span class="icon-phone06"></span>{{current_demand.user.phone}}</a>
                <a class="btn bgYellow disabled" evt="" v-else-if="current_demand.status == '10' && current_demand.self_has_max">您已爆灯，请等待...</a>
                <a class="btn bgYellow width-css" evt="bomb" v-else-if="current_demand.status == '10' && ( current_demand.has_max || current_demand.curr_offer == 200)"><span class="icon-baodeng"></span>我要爆灯</a>
                <a class="btn" v-bind:evt="btnStatus.evt" v-else v-html="btnStatus.text" v-bind:class="{disabled:btnStatus.evt==''}"></a>
                <img class="pic-one" v-if="current_demand.status == '20' && (current_demand.supplier_partic_status == 0 || current_demand.supplier_partic_status == 130)"
                     src="/img/demand/yikoujia.png" />
            </div>
        </div>
    </div>

</div>
<div class="sendImgPending hide ">
    <div class="loading "></div>
    <p class="text ">数据加载中</p>
</div>

</div>